import {Form, Icon, Input, Button} from 'antd';
import React from 'react';
import './Login.css';
import reqwest from 'reqwest';

const FormItem = Form.Item;

class Login extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                reqwest({
                    url: '/api/login',
                    method: 'post',
                    data: values,
                    success: (res) => {
                        if (res.error) {
                            this.error = res.error;
                            this.props.form.validateFieldsAndScroll({force: true});
                        } else {
                            this.props.handleLogin(res.user);
                        }
                    }
                })
            }
        });
    };

    handleEmailChange = () => {
        if (this.error) {
            this.error.email = null;
        }
    };

    handlePasswordChange = () => {
        if (this.error) {
            this.error.password = null;
        }
    }

    validateEmail = (rule, value, callback) => {
        if (this.error && this.error.email) {
            callback(this.error.email);
        }
        callback();
    };

    validatePassword = (rule, value, callback) => {
        if (this.error && this.error.password) {
            callback(this.error.password);
        }
        callback();
    };


    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem>
                    {getFieldDecorator('email', {
                        rules: [{required: true, message: '请输入邮箱!'},
                            {type: 'email', message: '请输入正确的邮箱!'},
                            {validator: this.validateEmail}],
                    })(
                        <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder="邮箱"
                               onChange={this.handleEmailChange}/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{required: true, message: '请输入密码!'},
                            {validator: this.validatePassword}],
                    })(
                        <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password"
                               placeholder="密码" onChange={this.handlePasswordChange}/>
                    )}
                </FormItem>
                <FormItem>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
                    </Button>
                    Or <a onClick={this.props.handleClickRegisterInLogin}>register now!</a>
                </FormItem>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create()(Login);

export default WrappedNormalLoginForm;